<template>
	<view class="content">
		<view class="noAddress" v-if="noAddress">
			<image :src="baseUrl+'img/my/noAddress.png'" class="noAddressIcon"></image>
			<text class="noAddressText">暂无地址</text>
		</view>
		<view class="addressList" v-else>
			<view class="addressInfo" v-for="(item,index) in content" :key="index" @click.stop="select(index)">
				<view class="topBox">
					<image :src="baseUrl+'img/my/address.png'" class="addressIcon"></image>
					<text class="name">{{item.user_name}}</text>
					<text class="phone">{{item.phone}}</text>
				</view>
				<text class="addressText">{{item.region}}{{item.address}}</text>
				<view class="line"></view>
				<view class="addressBottom">
					<view class="left" v-if="id!=1">
						<image :src="baseUrl+'img/my/selected.png'" class="selectedIcon"></image>
						<text class="selectedText">默认地址</text>
					</view>
					<view class="right" v-if="id!=1">
						<view class="editBox" @click="edit(item,item.id)">
							<image :src="baseUrl+'img/my/modify.png'" class="editIcon"></image>
							<text class="editText">修改</text>
						</view>
						<view class="deleteBox" @click="deleteAddress(item.id)">
							<image :src="baseUrl+'img/my/delete.png'" class="deleteIcon"></image>
							<text class="deleteText">删除</text>
						</view>
					</view>
				</view>
			</view>
			<view class="addressInfo" v-for="(item,index) in content" :key="index" @click.stop="select(index)">
				<view class="topBox">
					<image :src="baseUrl+'img/my/address.png'" class="addressIcon"></image>
					<text class="name">{{item.user_name}}</text>
					<text class="phone">{{item.phone}}</text>
				</view>
				<text class="addressText">{{item.region}}{{item.address}}</text>
				<view class="line"></view>
				<view class="addressBottom">
					<view class="left" v-if="id!=1">
						<image :src="baseUrl+'img/my/selected.png'" class="selectedIcon"></image>
						<text class="selectedText">默认地址</text>
					</view>
					<view class="right" v-if="id!=1">
						<view class="editBox" @click="edit(item,item.id)">
							<image :src="baseUrl+'img/my/modify.png'" class="editIcon"></image>
							<text class="editText">修改</text>
						</view>
						<view class="deleteBox" @click="deleteAddress(item.id)">
							<image :src="baseUrl+'img/my/delete.png'" class="deleteIcon"></image>
							<text class="deleteText">删除</text>
						</view>
					</view>
				</view>
			</view>
			<view class="addressInfo" v-for="(item,index) in content" :key="index" @click.stop="select(index)">
				<view class="topBox">
					<image :src="baseUrl+'img/my/address.png'" class="addressIcon"></image>
					<text class="name">{{item.user_name}}</text>
					<text class="phone">{{item.phone}}</text>
				</view>
				<text class="addressText">{{item.region}}{{item.address}}</text>
				<view class="line"></view>
				<view class="addressBottom">
					<view class="left" v-if="id!=1">
						<image :src="baseUrl+'img/my/selected.png'" class="selectedIcon"></image>
						<text class="selectedText">默认地址</text>
					</view>
					<view class="right" v-if="id!=1">
						<view class="editBox" @click="edit(item,item.id)">
							<image :src="baseUrl+'img/my/modify.png'" class="editIcon"></image>
							<text class="editText">修改</text>
						</view>
						<view class="deleteBox" @click="deleteAddress(item.id)">
							<image :src="baseUrl+'img/my/delete.png'" class="deleteIcon"></image>
							<text class="deleteText">删除</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="addBtn" @click="$navto.navto('./addAddress/addAddress')">
			+新增地址
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: this.$baseUrl,
				radioIndex: 0,
				content: [{
					address: 1,
					id: 3,
					is_def_address: 1,
					phone: 13333333333,
					region: '北京市北京市东城区',
					user_name: 1
				}],
				noAddress: false,
				id: '',
			}
		},
		onShow(options) {
			// 获取上一页传过来的id 如果是1表示为从商品页面过来选择地址
			let pagearr = getCurrentPages();
			let currentPage = pagearr[pagearr.length - 1];
			this.id = currentPage.options.id;

			//获取邮寄地址
			// this.$request.get(`userAddressIndex/${uni.getStorageSync('user_id')}`).then(res => {
			// 	this.content = res.data.data;
			// 	if (this.content.length > 0) { //有地址
			// 		this.noAddress = false;
			// 	}
			// })
		},
		methods: {
			edit(item, id) {
				uni.navigateTo({
					url: '/pages/shopping/address/addAddress/addAddress?item=' + JSON.stringify(item) + '&id=1' +
						'&addressid=' + id
					// url: '/pages/shopping/address/addAddress?item=' + item
				})
			},
			select(index) {
				if (this.id == 1) {
					let pages = getCurrentPages();
					let nowPage = pages[pages.length - 1];
					let prevPage = pages[pages.length - 2];
					prevPage.$vm.userAddressRead = this.content[index];
					uni.navigateBack({
						delta: 1
					});
				}
			},
			radioChange(e) {
				console.log(e.detail.value)
				this.radioIndex = e.detail.value;
			},
			deleteAddress(id) {
				uni.showModal({
					content: '您确定要删除该地址',
					success: (res => {
						if (res.confirm) {
							this.$request.get(`userAddressDelete/${id}`).then(res => {
								console.log(res.data.data);
								if (res.data.data == true) {
									this.$toast('删除成功')
									this.$request.get(
											`userAddressIndex/${uni.getStorageSync('user_id')}`)
										.then(res => {
											this.content = res.data.data;
											if (this.content.length > 0) { //有地址
												this.noAddress = false;
											} else {
												this.noAddress = true;
											}
										})
								} else {
									this.$toast('删除失败')
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					})
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
		background-color: #F0F0F0;
		position: fixed;

		.noAddress {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;

			.noAddressIcon {
				width: 62rpx;
				height: 65rpx;
				margin-top: 414rpx;
			}

			.noAddressText {
				font-size: 24rpx;
				margin-top: 48rpx;
				color: #717171;
			}
		}

		.addressList {
			width: 100%;
			height: 85vh;
			overflow-y: scroll;

			.addressInfo {
				width: 100%;
				margin-top: 20rpx;
				background-color: #fff;
				overflow: hidden;
				padding-top: 45rpx;
				padding-bottom: 25rpx;

				.topBox {
					margin-left: 40rpx;
					display: flex;
					align-items: center;

					.addressIcon {
						width: 22rpx;
						height: 28rpx;
					}

					.name {
						margin-left: 40rpx;
						color: #121212;
						font-size: 28rpx;
					}

					.phone {
						margin-left: 40rpx;
						color: #121212;
						font-size: 28rpx;
					}
				}
				.addressText {
					margin-top: 30rpx;
					margin-left: 100rpx;
					font-size: 24rpx;
					color: #121212;
					display: inline-block;
				}

				.line {
					margin-left: 40rpx;
					margin-top: 35rpx;
					width: 670rpx;
					height: 1rpx;
					background: #121212;
				}

				.addressBottom {
					position: relative;
					width: 100%;
					height: 55rpx;
					margin-top: 20rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
					
					.left {
						height: 100%;
						width: 200rpx;
						margin-left: 40rpx;
						display: flex;
						align-items: center;
						.selectedIcon{
							width: 28rpx;
							height: 28rpx;
						}
						.selectedText{
							font-weight: 500;
							font-size: 22rpx;
							color: #8E8E8E;
							margin-left: 25rpx;
						}
					}

					.right {
						margin-right: 40rpx;
						height: 100%;
						display: flex;
						align-items: center;

						.editBox {
							height: 100%;
							display: flex;
							align-items: center;

							.editIcon {
								width: 21rpx;
								height: 25rpx;
							}

							.editText {
								margin-top: -3rpx;
								font-size: 22rpx;
								color: #717171;
								margin-left: 12rpx;
							}
						}

						.deleteBox {
							height: 100%;
							margin-left: 31rpx;
							display: flex;
							align-items: center;

							.deleteIcon {
								width: 27rpx;
								height: 27rpx;
							}

							.deleteText {
								margin-top: -3rpx;
								margin-left: 12rpx;
								font-size: 22rpx;
								color: #717171;
							}
						}
					}
				}

			}
		}

		.addBtn {
			position: absolute;
			width: 670rpx;
			height: 100rpx;
			bottom: 100rpx;
			left: 40rpx;
			background: #000000;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 26rpx;
			color: #FFF;
		}
	}
</style>